import React, {Component} from "react";
import {View, TouchableOpacity, Alert, TextInput, StyleSheet, Dimensions, Modal, Text, Image} from "react-native";
import ClosableModal from "rn-closable-modal";


const {width, height} = Dimensions.get('window')

type Props = {
    callbackStatus:Function,
    callbackRefund:Function,
}
export default class RefundOrderModal extends Component<Props> {

    constructor(props) {
        super(props);
        this.state = {
            isVisible: this.props.show,
        };
    }

    componentWillReceiveProps(nextProps) {
        this.setState({isVisible: nextProps.show});
    }

    closeModal = () => {
        this.setState({
            isVisible: false
        });
        this.props.callbackStatus(false);

    }

    goonRefund = () => {
        this.props.callbackRefund()
    }


    render() {

        return (
            <View style={{flex: 1}}>
                <ClosableModal
                    animationType='fade'
                    show={this.state.isVisible}
                    onClose={this.closeModal}
                    transparent={true}
                >
                    <View style={{backgroundColor:'white',width:(width - 24),borderRadius:3}}>
                        <Text style={{fontSize:16,marginTop:15,color:'#111111',fontWeight:'bold',alignSelf:'center'}}>退款须知</Text>
                        <View style={{flexDirection:'row',alignItems:"center",marginTop:10}}>
                            <View style={styles.point}/>
                            <Text style={styles.titleLeft}>【未开课的课程】</Text>
                        </View>
                        <Text style={styles.contentMain}>开课前全额退款</Text>
                        <View style={{flexDirection:'row',alignItems:"center",marginTop:10}}>
                            <View style={styles.point}/>
                            <Text style={styles.titleLeft}>【正在直播的课程】</Text>
                        </View>
                        <Text style={[styles.contentMain,{lineHeight:15}]}>扣除已经直播的课程费用，按比例退回未直播的课程费用。已直播的课程回放视频仍会留在学员账户中。</Text>
                        <View style={{flexDirection:'row',alignItems:"center",marginTop:10}}>
                            <View
                                style={styles.point}/>
                            <Text style={styles.titleLeft}>【直播结束的课程】</Text>
                        </View>
                        <Text style={styles.contentMain}>购买回放视频，无法退费，请家长们知悉</Text>
                        <View style={{flexDirection:"row",marginLeft:15,marginTop:10,marginRight:34}}>
                            <Text style={{color:'#DB3843'}}>注</Text>
                            <Text style={{color:'#DB3843',marginLeft:8,fontSize:12}}>①</Text>
                            <Text style={[styles.attention,{lineHeight:15}]}>报课即免费寄送讲义。若退课，且讲义已寄送，将从应退费中再扣除讲义费用。</Text>
                        </View>

                        <View
                            style={{flexDirection:"row",marginLeft:15,marginRight:34,marginTop:8,alignItems:'center'}}>
                            <Text style={{color:'#DB3843',marginLeft:22,fontSize:12}}>②</Text>
                            <Text style={styles.attention}>若使用优惠券，退费后优惠券不退回</Text>
                        </View>

                        <View
                            style={{flexDirection:"row",justifyContent:'center',marginTop:15,paddingLeft:15,paddingRight:15,marginBottom:15}}>
                            <TouchableOpacity onPress={this.closeModal}
                                              style={{width:150,height:25,backgroundColor:'#DB3843',alignItems:'center',justifyContent:'center',borderRadius:4,}}>
                                <Text style={{fontSize:12,color:'#FEFEFE'}}>知道了</Text>
                            </TouchableOpacity>
                            <View style={{flex:1}}/>
                            <TouchableOpacity onPress={this.goonRefund}
                                              style={{width:150,height:25,backgroundColor:'#DCDCDC',alignItems:'center',justifyContent:'center',borderRadius:4,}}>
                                <Text style={{fontSize:12,color:'#FEFEFE',marginLeft:4.5}}>继续退款</Text>
                            </TouchableOpacity>
                        </View>
                    </View>
                </ClosableModal>
            </View>
        );
    }
}

const styles = StyleSheet.create({

    white_background: {
        width: 351,
        height: 304,
        backgroundColor: 'white',
        borderRadius: 4,
    },
    titleLeft: {
        fontSize: 12,
        color: "#333333",
        marginLeft: 8,
    },
    contentMain: {
        fontSize: 12,
        color: '#999999',
        marginLeft: 34,
        marginRight: 34,
        marginTop: 8,
        width: (width - 90),
    },
    attention: {
        fontSize: 12,
        color: '#DB3843',
        marginRight: 34,
        marginLeft: 7,
    },
    point: {
        width: 5,
        height: 5,
        borderRadius: 2,
        backgroundColor: '#DB3843',
        marginLeft: 17,
        // borderWidth:2,
        // borderColor:'rgba(219, 56, 67, 0.27)',
        shadowColor: 'rgba(219, 56, 67, 0.27)',
        shadowOffset: {h: 2, w: 2},
        shadowRadius: 2,
        shadowOpacity: 0.4,

    },

});
